<template>
	<view class="content">
		<view class="threeContent">
			<view class="threeContent_left" 
			@click="clickToItemJumpVideo(threeList[0])">
				<view class="iconImg mb-2" v-show="requestSuccess">
					<image src="/static/images/rank_2.png" mode=""></image>
				</view>
				<view class="coverImg">
					<image class="rounded20" :src="threeList[0].cover" mode="aspectFill"></image>
				</view>
				<text class="text">{{ threeList[0].name }}</text>
				<view class="fireCountContent">
					<view class="fireCountContent_img" v-show="requestSuccess">
						<image src="/static/images/fire.png" mode=""></image>
					</view>
					<view class="fireCountContent_count" v-show="requestSuccess">
						{{ threeList[0].hot_number }}
					</view>
				</view>
			</view>
			<view class="threeContent_center threeContent_left" 
			@click="clickToItemJumpVideo(threeList[1])">
				<view class="iconImg mb-2" v-show="requestSuccess">
					<image src="/static/images/rank_1.png" mode=""></image>
				</view>
				<view class="coverImg">
					<image class="rounded20" :src="threeList[1].cover" mode="aspectFill"></image>
				</view>
				<view class="text">{{ threeList[1].name }}</view>
				<view class="fireCountContent">
					<view class="fireCountContent_img" v-show="requestSuccess">
						<image src="/static/images/fire.png" mode=""></image>
					</view>
					<view class="fireCountContent_count" v-show="requestSuccess">
						{{ threeList[1].hot_number }}
					</view>
				</view>
			</view>
			<view class="threeContent_right threeContent_left" 
			@click="clickToItemJumpVideo(threeList[2])">
				<view class="iconImg mb-2" v-show="requestSuccess">
					<image src="/static/images/rank_3.png" mode=""></image>
				</view>
				<view class="coverImg">
					<image class="rounded20" :src="threeList[2].cover" mode="aspectFill"></image>
				</view>
				<view class="text">{{ threeList[2].name }}</view>
				<view class="fireCountContent">
					<view class="fireCountContent_img" v-show="requestSuccess">
						<image src="/static/images/fire.png" mode=""></image>
					</view>
					<view class="fireCountContent_count" v-show="requestSuccess">
						{{ threeList[2].hot_number }}
					</view>
				</view>
			</view>
		</view>
		
		<view class="listContent">
			<horizontal-default-item v-for="(item, index) in dataList" :key="index" 
			:dataInfo="item" 
			:sortNumber="index + 4" 
			@clickToItem="clickToItemJumpVideo(item)" >
			</horizontal-default-item>
		</view>
	</view>
	
</template>

<script>
	import horizontalDefaultItem from '../../public/horizontal-default-item/horizontal-default-item.vue'
	import interfaces from '@/utils/interfaces.js'
	import config from '@/utils/config.js'
    import tools from "@/utils/tools.js"

	export default {
		data() {
			return {
				threeList:[],
				dataList:[],
				requestSuccess: false
			}
		},
		methods: {
			clickToItemJumpVideo(res) {
				let data = {playlet_id:res.playlet_id, 
						    name:res.name, 
							last_episode_number:res.last_episode_number}
				tools.jump_video_page_by_info(data)
			}
		},
		mounted() {
			let self = this;
			self.request({
				url:interfaces.search_recommend,
				method:"GET",
				success: (res)=> {
					// console.log("榜单",res)
					let content = res.content
					var data1 = []
					var data2 = []
					content.forEach((item, index) => {
						if (index < 3) {
							data1.push(item)
						} else{
							data2.push(item)
						}
					})
					self.threeList = data1
					self.dataList = data2
					self.requestSuccess = true
				}
			});
		},
		components: {
			horizontalDefaultItem
		},
		
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>

<style lang="scss">
	.content{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		width: 100%;
		background-color: #ffffff;
		
		.threeContent{
			display: flex;
			box-sizing: border-box;
			margin-top: 40rpx;
			margin-bottom: 30rpx;
			
			.threeContent_left{
				display: flex;
				box-sizing: border-box;
				overflow: hidden;
				flex-direction: column;
				width: 33.33%;
				align-items: center;
				margin: 0px 5px;
				margin-top: 20px;
						
				.iconImg{
					width: 90rpx;
					height: 80rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.coverImg{
					display: flex;
					width: 100%;
					height: 280rpx;
					margin: 0px 10px;
					image{
						flex-shrink: 0;
						width: 100%;
						height: 100%;
					}
				}
				.text{
					width: 100%;
					font-size: 14px;
					margin-top: 7px;
					text-align: center;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					// background-color: red;
				}
					
				.fireCountContent{
					display: flex;
					box-sizing: border-box;
					align-items: center;
					.fireCountContent_img{
						flex-shrink: 0;
						width: 40rpx;
						height: 40rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.fireCountContent_count{
						font-size: 13px;
						color: #DF7C28;
					}
				}
			}
			
			.threeContent_center{
				margin-top: 0px;
				.iconImg{
					margin-top: 0px;
				}
				.coverImg{
					height: 320rpx;
				}
			}
			.threeContent_right{
				margin-top: 30px;
				.iconImg{
					margin-top: 0px;
				}
				.coverImg{
					height: 265rpx;
				}
			}
		}
		
		.listContent{
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			margin: 0px 15px;
			margin-bottom: 15px;
		}
	}
</style>

